<template>
    <div class="photoInfo-container">
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间:{{photoinfo.add_time | dateFormat}}</span>
            <span>点击次数:{{photoinfo.click}}次</span>
        </p>

        <hr>
        <!-- 缩略图区域 -->
        <!-- <img class="preview-img" v-for="(item, index) in list" :src="item.url" height="100" @click="$preview.open(index,list)" :key="item.url"> -->
        <vue-preview :slides="list" @close="handleClose"></vue-preview>
        <!-- 图片内容 -->
        <div class="content" v-html="photoinfo.content">

        </div>

        <!-- 放置一个现成的 评论子组件 -->
        <cmt-box></cmt-box>
    </div>
</template>

<script>
    // 1.导入子组件
    import commentt from '../subcomponents/comment.vue'
    export default {
      data(){
          return{
              id:this.$route.params.id, //从路由中获取的图片id
              photoinfo:{ },
              list:[ ]//缩略图的数组
          }
      },
        created(){
          this.getPhotoInfo();
          this.getThumbs()
        },
        methods:{
          getPhotoInfo(){
              //获取图片的详情
              this.$http.get("Java/getimageInfo"+this.id+".json").then(result =>{
                  if(result.body.status===0){
                      this.photoinfo = result.body.message[0]
                  }
              })
          },
            getThumbs(){
              //获取缩略图
                this.$http.get('Java/photoinfodetail' + this.id + '.json').then(result =>{
                    if (result.body.status===0){
                        //循环每个图片数据，补全图片的宽和高
                        result.body.message.forEach(item=>{
                            item.w = 600;
                            item.h = 400;
                            item.msrc = item.src;
                        });
                        //把完整的数据保存在list中
                        this.list = result.body.message;
                    }
                })
            },
            handleClose () {
                console.log('close event')
            }
        },
        components:{
          //2.注册评论子组件
          'cmt-box':commentt
        }
    }
</script>

<style scoped lang="scss">
.photoInfo-container{
    padding: 4px;
    color: #26A2FF;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .content{
        font-size: 13px;
        line-height: 28px;
        p{
            width: 95px;
            margin: 0 auto;
        }
    }
}
</style>